<!DOCTYPE html>
<html>
    <head>
        <script>
            function myFunction1(){
                document.getElementById("demo").innerHTML = "已经改变";
            }
            function myFunction2(){
                
            }
        </script>
    </head>
    <body>
        <h2>head中的javascript,当然放到其他地方也可以</h2>
        <p id="demo">没有改变</p>
        <button type="button" onclick="myFunction1()">点我改变文字</button>
        <p>以document.write( )的方法写入,这种方法仅用于测试</p>
        <script>document.write(1+6)</script>
        <!-- <script>window.alert("弹出警告");</script> -->
        <p id="one1"></p>
        <p id="one2"></p>
        <p id="one3"></p>
        <p id="one4"></p>
        <p id="one5"></p>
        <p id="two1" style="color: brown;">这里出现时间</p>
        <p id="two2" style="color: chocolate;">这里是调用函数的时间</p>
        <p id="two3"></p>
        <p id="two4"></p>
        <p id="two5"></p>
        <p id="two6"></p>
        <p id="two7"></p>
        <p id="two8"></p>
        <p id="two9"></p>
        <p id="three1" style="color: chartreuse;">字符串转换为数组</p>
        <p id="three2"></p>
        <p id="three3"></p>
        <p id="three4"></p>
        <p id="three5"></p>
        <p id="three6"></p>
        <p id="three7"></p>
        <script>
            var length = 7;                             // 数字
            var str = "The full name of China is the People's Republic of China."       // 字符串
            var cars = ["123", "wangyifan", "嘿"];         // 数组
            var z = {firstName:"Bill", lastName:"Gates"};     // 对象
            var x = 3 + 5 + "8"
            var y = "8" + 3 + 5
            var text1 = "hellow";
            var text2 = text1.concat(" ",str);
            var text3 = "a,b,c,d,e,f";
            var arr = text3.split(",");
            //如果把要给数值放入引号中，之后的数值会被视作字符串并被级联
            document.getElementById("one1").innerHTML = x;
            document.getElementById("one2").innerHTML = y;
            //两种不同的方法来访问对象属性。
            document.getElementById("one3").innerHTML = z.firstName;
            document.getElementById("one4").innerHTML = z["lastName"];
            //length 属性返回字符串的长度
            document.getElementById("one5").innerHTML = str.length;
            //indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：
            document.getElementById("two3").innerHTML = str.indexOf("China");
            //lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：
            document.getElementById("two4").innerHTML = str.lastIndexOf("China");
            //如果字符串包含指定值，includes() 方法返回 true。
            document.getElementById("three2").innerHTML = str.includes("China",20)
            //这几种方法都接受第二个参数作为搜索的开始位置
            document.getElementById("three2").innerHTML = str.lastIndexOf("China",20);
            //slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。某个参数为负，则从字符串的结尾开始计数。
            document.getElementById("two5").innerHTML = str.slice(9,13); 
            document.getElementById("two6").innerHTML = str.slice(-13,-9); 

            //substr() 第二个参数规定被提取部分的长度。
            document.getElementById("two7").innerHTML = str.substr(9,4);
            //replace() 方法用另一个值替换在字符串中指定的值,默认地，replace() 只替换首个匹配：
            document.getElementById("two8").innerHTML = str.replace("name","NAME")
            //concat() 方法连接两个或多个字符串,可用于代替加运算符。
            document.getElementById("two9").innerHTML = text2;
            //可以通过 split() 将字符串转换为数组：
            document.getElementById("three1").innerHTML = arr[0];
            //向数组添加新元素的最佳方法是使用 push() 方法,也可以使用 length 属性
            cars.push("dazhong");
            cars[cars.length] = "baoma"
            //当然pop() 方法从数组中删除最后一个元素
            //shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。unshift() 方法将新元素添加到数组的开头。
            document.getElementById("three3").innerHTML = cars;
            fruits.shift();
            document.getElementById("three4").innerHTML = cars;
        </script>
        <p>改变了 id="two1" 的元素的内容</p>
        <button onclick="document.getElementById('two1').innerHTML = Date()">现在的时间</button>
        <br>
        <p>使用 this.innerHTML 改变自身元素的内容：</p> 
        <button onclick="this.innerHTML=Date()">现在的时间</button>
        <p>使用事件属性调用函数</p>
        <button onclick="displayDate()">现在的时间</button>
        <p>\ 为转义字符</p>
        <p>\'	输出 单引号 \" 输出 双引号 \\ 输出 反斜杠</p> 
        <script>
            function displayDate(){
                document.getElementById("two2").innerHTML = Date();
            }
        </script>

        <button onclick="myFunction3()">按字母顺序排序</button>      
        <p id="demo1"></p>
        <button onclick="myFunction4()">升序对数组进行排序</button>
        <p id="demo2"></p>
        <script>
          //sort() 方法按字母顺序对数组进行排序。
          var fruits = ["Banana", "Orange", "Apple", "Mango"];
          document.getElementById("demo1").innerHTML = fruits;
          var points = [40, 100, 1, 5, 25, 10];
          document.getElementById("demo2").innerHTML = points;  
          function myFunction4() {
              points.sort(function(a, b){return a - b});
              document.getElementById("demo2").innerHTML = points;
          }
          function myFunction3() {
              fruits.sort();  
              document.getElementById("demo1").innerHTML = fruits;
          }
        </script>
        <p id="a1"></p>
        <p id="a2"></p>
        <p id="a3"></p>
        <p id="a4"></p>
        <p id="a5"></p>
        <script>
            document.getElementById("a1").innerHTML = Math.random();
            //返回 0 与 9 之间的随机整数
            document.getElementById("a2").innerHTML = Math.floor(Math.random() * 10); 
        </script>
    </body>
</html>